<template>
	<view class="wrapper">
		<view class="bg"></view>
		<view class="header">
			<view class="back" @tap="navback">
				<uni-icons type="left" size="20"></uni-icons>
			</view>
		</view>
		<view class="content">
			<view class="title">注册</view>
			<view class="form">
				<view class="input-wrapper">
					<view class="left">+86 <uni-icons type="down" size="15"></uni-icons></view>
					<view class="right">
						<input type="text" placeholder="请输入手机号" placeholder-class="inputclass" v-model="mobile">
					</view>
				</view>
				<view class="input-wrapper">
					<view class="left">密码</view>
					<view class="right">
						<input type="safe-password" placeholder="请输入密码" placeholder-class="inputclass" v-model="password">
					</view>
				</view>
				<view class="input-wrapper">
					<view class="left">确认密码</view>
					<view class="right">
						<input type="safe-password" placeholder="请重新输入密码" placeholder-class="inputclass" v-model="confirm_password">
					</view>
				</view>
				<view class="input-wrapper">
					<view class="left">支付密码</view>
					<view class="right">
						<input type="safe-password" placeholder="请输入支付密码" placeholder-class="inputclass" v-model="pay_pwd">
					</view>
				</view>
				<view class="input-wrapper">
					<view class="left">机构码</view>
					<view class="right">
						<input type="text" placeholder="请输入机构码" placeholder-class="inputclass" v-model="invite_code">
					</view>
				</view>
			</view>
			<view class="agree">
				<uni-icons type="checkbox" size="16"></uni-icons>
				<view class="agreeinfo">我已阅读并同意<text>《用户协议》</text>后方可注册</view>
			</view>
			<view class="button">
				<view class="register-btn" @tap="jumpNavigateTo('/pages/user/login')">注册</view>
				<view class="login-btn" @tap="jumpNavigateToa('/pages/user/login')">登录账号</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<script >
	
	export default {
		data() {
			return {
				title: 'Hello',
				mobile:'',
				password:'',
				confirm_password:'',
				invite_code:'',
				pay_pwd:'',
				
			}
		},
		onLoad() {

		},
		methods: {
			jumpNavigateToa(url){
				uni.navigateTo({
				url: url
				})
			},
			 jumpNavigateTo(url) {
				if(this.mobile == ''){
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none'
					})
				}else if (this.password == '') {
					uni.showToast({
						title: '密码不能为空',
						icon: 'none'
					})
				} else if (this.confirm_password == '') {
					uni.showToast({
						title: '确认密码不能为空',
						icon: 'none'
					})
				}else if (this.password != this.confirm_password) {
					uni.showToast({
						title: '密码不一致',
						icon: 'none'
					})
				} else{ 
					var data = {
						mobile:this.mobile,
						password:this.password,
						confirm_password:this.confirm_password,
						invite_code:this.invite_code,
						pay_pwd:this.pay_pwd,
					}
					this.$rqt.register(data).then(res => {
					
						if(res.code == 1){
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}else{
							uni.showToast({
								title: '注册成功',
								icon: 'none'
							})
							setTimerout(() =>{
							uni.navigateTo({
							url: url
							})
							},2000)
							
						}
					})
					
				}
				
			},
			
			jumpSwitchTab(url) {
				uni.switchTab({
					url: url
				})
			},
			navback() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss">
	page{
		width: 100%;
		height: 100%;
	}
	.wrapper {
		height: 100%;
		padding: 50rpx 33rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
		background-color: #f7f6fb;
	}
	.wrapper::before {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 0;
	  z-index: 0;
	  width: 100%;
	  height: 347rpx; /* 渐变区域的高度 */
	  background: linear-gradient(to bottom, #7c9fd4, #f7f6fb); /* 渐变效果 */
	}
	.header{
		position: relative;
		z-index: 1;
		line-height: 100rpx;
		.back{
			margin-left: -10rpx;
		}
	}
	.content{
		position: relative;
		z-index: 1;
		.title{
			font-size: 45rpx;
			margin-bottom: 40rpx;
		}
		.form{
			.input-wrapper{
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				background-color: #fff;
				display: flex;
				justify-content: flex-start;
				border-radius: 20rpx;
				margin: 20rpx auto;
				font-size: 28rpx;
				
				.left{
					width: 180rpx;
					text-align: center;
				}
				
				.right input{
					height: 100rpx;
					line-height: 100rpx;
				}
				
				.inputclass{
					font-size: 28rpx;
				}
			}
		}
		.agree{
			display: flex;
			justify-content: flex-start;
			font-size: 24rpx;
			margin: 40rpx auto 40rpx;
			.agreeinfo{
				margin-left: 10rpx;
				text{
					color: #08377D;
				}
			}
		}
		.button{
			.register-btn{
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 32rpx;
				font-weight: bold;
				text-align: center;
				color: #fff;
				background: linear-gradient(to right, #004EC2, #08377D);
				border-radius: 20rpx;
			}
			.login-btn{
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 32rpx;
				font-weight: bold;
				text-align: center;
				color: #000;
			}
		}
	}
</style>